import * as echarts from 'echarts';
import * as Lodash from 'lodash';

const ItemColor1 = '#1189e8';
const ItemColor1Light = '#0dbbf1';
const ItemColor2 = '#ec8692';
const ItemColor2Light = '#f0bec4';

const ColorList = [
  {
    l: 1,
    b: 0,
    r: 0,
    t: 0,
    colorStart: ItemColor1Light,
    colorEnd: ItemColor1,
  },
  {
    l: 1,
    b: 0,
    r: 0,
    t: 0,
    colorStart: ItemColor2Light,
    colorEnd: ItemColor2,
  },
];
const Item1LineColorBottomToTop = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    {
      offset: 1,
      color: ItemColor1,
    },
    {
      offset: 0,
      color: ItemColor1Light,
    },
  ]
);
const Item2LineColorBottomToTop = new echarts.graphic.LinearGradient(
  0,
  0,
  0,
  1,
  [
    {
      offset: 1,
      color: ItemColor2,
    },
    {
      offset: 0,
      color: ItemColor2Light,
    },
  ]
);

const legendBase = {
  icon: 'circle',
  right: 0,
  top: 0,
  textStyle: {
    // #8C8C8C
    color: '#FFF',
  },
  itemHeight: 8,
  itemWidth: 8,
};

export const ChartGenderOptions: echarts.EChartsOption = {
  legend: {
    ...legendBase,
    top: '8%',
  },
  grid: {
    //   left: '0%',
    //   right: '4%',
    //   bottom: '0%',
    //   top: '3%',
    containLabel: true,
  },
  series: [
    {
      type: 'pie',
      radius: '70%',
      center: ['50%', '60%'],
      data: [
        { value: 57, name: '男' },
        { value: 66, name: '女' },
      ],
      // padAngle: 4,
      itemStyle: {
        color: (list: any) => {
          return new echarts.graphic.LinearGradient(
            ColorList[list.dataIndex].l,
            ColorList[list.dataIndex].b,
            ColorList[list.dataIndex].r,
            ColorList[list.dataIndex].t,
            [
              {
                offset: 0,
                color: ColorList[list.dataIndex].colorStart,
              },
              {
                offset: 1,
                color: ColorList[list.dataIndex].colorEnd,
              },
            ]
          );
        },
      },
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
    },
  ],
};

export const ChartLiveOptions: echarts.EChartsOption = {
  legend: {
    ...legendBase,
    // left: 0
  },
  graphic: [
    {
      type: 'text',
      left: 'center',
      top: '50%',
      textConfig: {
        offset: [10, 10],
      },
      style: {
        text: '独居',
        fontSize: 16,
        fill: '#FFF',
      },
    },
    {
      type: 'text',
      left: 'center',
      top: '64%',
      style: {
        text: '123456',
        fontSize: 20,
        fill: '#FFF',
        fontWeight: 'bold',
      },
    },
  ],
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      center: ['50%', '62%'],
      data: [
        { value: 57, name: '男' },
        { value: 66, name: '女' },
      ],
      padAngle: 2,
      itemStyle: {
        borderRadius: 2,
      },
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
    },
  ],
};

export const ChartAgeOptions: echarts.EChartsOption = {
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    ...legendBase,
  },
  grid: {
    left: '2%',
    right: '2%',
    bottom: '0%',
    top: '10%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLabel: {
      color: '#FFF',
      interval: 0,
    },
    axisLine: {
      lineStyle: {
        color: ItemColor1,
        opacity: 0.5,
      },
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      show: false,
    },
    splitLine: {
      lineStyle: {
        color: '#333',
        opacity: 0.5,
      },
    },
  },
  series: [
    {
      type: 'bar',
      stack: 'gender',
      name: '男',
      barWidth: '50%',
      data: [],
      label: {
        show: true,
        position: 'insideTop',
        color: '#FFF',
      },
      itemStyle: {
        color: Item1LineColorBottomToTop,
      },
    },
    {
      type: 'bar',
      stack: 'gender',
      name: '女',
      barWidth: '50%',
      data: [],
      itemStyle: {
        borderRadius: [6, 6, 0, 0],
        color: Item2LineColorBottomToTop,
      },
      label: {
        show: true,
        position: 'insideTop',
        color: '#FFF',
      },
    },
  ],
};

export const ChartDisabilityOptions: any = Lodash.cloneDeepWith(
  ChartAgeOptions,
  (value) => {
    const borderRadius = [4, 4, 0, 0];
    const series0 = Lodash.cloneDeep(value.series[0]);
    const series1 = Lodash.cloneDeep(value.series[1]);
    return {
      ...value,

      tooltip: {
        ...value.tooltip,
        axisPointer: {
          type: 'shadow',
        },
      },
      series: [
        {
          ...series0,
          stack: 'male',
          showBackground: true,
          backgroundStyle: {
            borderRadius,
          },
          barWidth: '20%',
          itemStyle: {
            ...series0.itemStyle,
            borderRadius,
          },
          label: {
            ...series0.label,
            position: 'top',
          },
        },
        {
          ...series1,
          stack: 'female',
          showBackground: true,
          backgroundStyle: {
            borderRadius,
          },
          barWidth: '20%',
          itemStyle: {
            ...series1.itemStyle,
            borderRadius,
          },
          label: {
            ...series1.label,
            position: 'top',
          },
        },
      ],
    };
  }
);

export const ChartSleepHoursOptions: any = Lodash.cloneDeepWith(
  ChartDisabilityOptions,
  (value) => {
    return {
      ...value,
      tooltip: {
        ...value.tooltip,
        axisPointer: null,
      },
      grid: {
        ...value.grid,
        top: '20%',
      },
      yAxis: {
        ...value.yAxis,
        name: '人数',
        nameTextStyle: {
          color: '#fff',
        },
        axisLine: {
          show: true,
          lineStyle: value.xAxis.axisLine.lineStyle,
        },
        axisLabel: {
          show: true,
          color: '#FFF',
        },
      },
      legend: {
        show: false,
      },
      series: [
        {
          ...Lodash.cloneDeep(value.series[0]),
          name: '人数',
        },
      ],
    };
  }
);

export const ChartSleepQualityOptions: any = Lodash.cloneDeepWith(
  ChartSleepHoursOptions,
  (value) => {
    const series0 = Lodash.cloneDeep(value.series[0]);
    return {
      ...value,
      grid: {
        ...value.grid,
        top: '10%',
        right: '8%',
      },
      yAxis: {
        ...value.xAxis,
      },
      xAxis: {
        ...value.yAxis,
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        name: null,
      },
      series: [
        {
          ...series0,
          barWidth: '40%',
          backgroundStyle: {
            borderRadius: [0, 0, 0, 0],
          },
          itemStyle: {
            ...series0.itemStyle,
            borderRadius: [0, 4, 4, 0],
          },
          label: {
            ...series0.label,
            position: 'right',
          },
        },
      ],
    };
  }
);

export const ChartCallTimeOptions: any = Lodash.cloneDeepWith(
  ChartSleepHoursOptions,
  (value) => {
    return {
      ...value,
      grid: {
        ...value.grid,
        right: '10%',
      },
      xAxis: {
        ...value.xAxis,
        name: '分钟',
        nameTextStyle: {
          color: '#fff',
        },
      },
    };
  }
);

export const ChartDeviceTypeOptions: any = Lodash.cloneDeepWith(
  ChartLiveOptions,
  (value) => {
    const series0 = Lodash.cloneDeep(value.series[0]);
    return {
      ...value,
      legend: {
        ...value.legend,
        type: 'scroll',
        orient: 'vertical',
        left: '15%',
        top: 'middle',
      },
      graphic: null,
      series: [
        {
          ...series0,
          radius: ['50%', '80%'],
          padAngle: 0,
          itemStyle: null,
          center: ['65%', '50%'],
        },
      ],
    };
  }
);

export const ChartDeviceAlarmOptions: any = Lodash.cloneDeepWith(
  ChartDeviceTypeOptions,
  (value) => {
    const series0 = Lodash.cloneDeep(value.series[0]);
    return {
      ...value,
      legend: {
        ...value.legend,
        type: 'scroll',
        orient: 'vertical',
        left: '65%',
        top: 'middle',
      },
      series: [
        {
          ...series0,
          radius: ['0%', '80%'],
          center: ['35%', '50%'],
        },
      ],
    };
  }
);

export const ChartDay30AlarmOptions: any = Lodash.cloneDeepWith(
  ChartSleepHoursOptions,
  (value) => {
    const series0 = {
      ...Lodash.cloneDeep(value.series[0]),
      name: '报警数',
    };
    const series1 = {
      ...series0,
      name: '响应率',
      label: {
        show: false,
      },
      itemStyle: {
        ...series0.itemStyle,
        color: '#F59A23',
        name: '响应率',
      },
      type: 'line',
      yAxisIndex: 1,
      data: [],
    };
    const yAxis0 = {
      ...value.yAxis,
      name: '报警数',
    };
    const yAxis1 = {
      ...value.yAxis,
      name: '响应率',
      axisLabel: {
        ...value.yAxis.axisLabel,
        formatter: '{value}%',
      },
    };
    return {
      ...value,
      grid: {
        ...value.grid,
        // right: '3%',
      },
      yAxis: [yAxis0, yAxis1],
      series: [series0, series1],
    };
  }
);

export const ChartStaffOptions: any = Lodash.cloneDeepWith(
  ChartLiveOptions,
  (value) => {
    const series0 = Lodash.cloneDeep(value.series[0]);
    return {
      ...value,
      legend: {
        ...value.legend,
        left: 'center',
      },
      series: [
        {
          ...series0,
          radius: ['50%', '70%'],
          padAngle: 0,
          itemStyle: null,
          // center: ['50%', '50%'],
        },
      ],
    };
  }
);

export const ChartStaffLevelOptions: any = Lodash.cloneDeepWith(
  ChartStaffOptions,
  (value) => {
    const series0 = Lodash.cloneDeep(value.series[0]);
    return {
      ...value,
      legend: {
        ...value.legend,
        top: '5%',
      },
      series: [
        {
          ...series0,
          radius: ['50%', '70%'],
          // center: ['50%', '50%'],
        },
      ],
    };
  }
);

export const ChartServicedDisabilityOptions: any = Lodash.cloneDeepWith(
  ChartAgeOptions,
  (value) => {
    const series0 = Lodash.cloneDeep(value.series[0]);
    const series1 = Lodash.cloneDeep(value.series[1]);
    return {
      ...value,

      grid: {
        ...value.grid,
        top: '0',
      },
      xAxis: value.yAxis,
      yAxis: value.xAxis,
      legend: {
        show: false,
      },
      series: [
        {
          ...series0,
          itemStyle: {
            ...series0.itemStyle,
            borderRadius: 0,
          },
          // label: {
          //   ...series0.label,
          //   position: 'insideTop',
          // },
        },
        {
          ...series1,
          itemStyle: {
            ...series1.itemStyle,
            borderRadius: [0, 4, 4, 0],
          },
        },
      ],
    };
  }
);

export const ChartServiceTimeOptions: any = Lodash.cloneDeepWith(
  ChartSleepHoursOptions,
  (value) => {
    return {
      ...value,
      yAxis: {
        ...value.yAxis,
        name: '服务次数',
        nameTextStyle: {
          ...value.yAxis.nameTextStyle,
          padding: [0, 0, 0, 30],
        },
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        // nameGap: 0
      },
      series: [
        {
          ...Lodash.cloneDeep(value.series[0]),
          name: '服务次数',
        },
      ],
    };
  }
);

export const ChartServiceSortOptions: any = Lodash.cloneDeep(
  ChartDeviceAlarmOptions
);

export const ChartServiceTop10Options: any = Lodash.cloneDeepWith(
  ChartSleepHoursOptions,
  (value) => {
    return {
      ...value,
      yAxis: {
        ...value.yAxis,
        name: '次数',
      },
      xAxis: {
        ...value.xAxis,
        axisLabel: {
          ...value.xAxis.axisLabel,
          rotate: 45,
          // margin: 15,
          align: 'right',
          // verticalAlign: 'middle',
        },
      },
      series: [
        {
          ...Lodash.cloneDeep(value.series[0]),
          name: '次数',
        },
      ],
    };
  }
);
